<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-row>
        <el-col :span="2">
          <div style="margin-top: 25px">
            <el-button v-if="!sceneOne.length && sceneName != undefined">
              <!-- {{ sceneOneMsg.sceneName }} -->
              {{ sceneName }}
            </el-button>
          </div>
        </el-col>
        <el-col :span="20" v-if="sceneOne.length">
          <vue2-org-tree
            :data="treeDataOne"
            node-key="nodeCode"
            :props="defaultProps"
            :horizontal="true"
            @on-expand="onExpand"
            @on-node-mouseover="onMouseover"
            @on-node-mouseout="onMouseout"
            @on-node-click="NodeClick"
          />
        </el-col>
      </el-row>
      <div v-show="BasicSwich" class="floating">
        <p v-if="BasicInfo.nodeCode != 'root'">编号:{{ BasicInfo.nodeCode }}</p>
        <p v-else>编号:{{ BasicInfo.sceneCode }}</p>
        <p>名称:{{ BasicInfo.nodeName }}</p>
      </div>
    </div>

    <!-- 属性信息 -->
    <div style="padding: 10px; min-height: 180px">
      <p style="font-weight: bolder; fint-size: 14px; margin-bottom: 10px">
        属性信息
      </p>
      <div style="width: 100%">
        <el-table :data="sceneOneTable" style="width: 100%" height="100px;">
          <el-table-column
            prop="nodeCode"
            show-overflow-tooltip
            label="节点编码"
          />
          <el-table-column
            prop="nodeName"
            show-overflow-tooltip
            label="节点名称"
          />
          <el-table-column label="包含规则" show-overflow-tooltip>
            <template slot-scope="scope">
              <div v-if="scope.row.ruleList.length">
                {{ ruleName }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column prop="descn" label="描述" show-overflow-tooltip />
        </el-table>
      </div>
    </div>

    <!--  运行场景-->
  </div>
</template>

<script>
import { ruleScene } from "@/api/index";
import { listToTree } from "@/lib/util";
export default {
  name: "sceneImg",
  props: {
    sceneCode: {
      type: String,
      default: "",
    },
    sceneName: {
      type: String,
      default: "",
    },
  },
  //   watch: {
  //     sceneCode: function (newVal, oldVal) {
  //       this.sceneCode = newVal;
  //       newVal && this.init();
  //     },
  //   },
  data() {
    return {
      rootNodeOne: {},
      //   sceneName: "",
      ruleName: "",
      sceneOneTable: [],
      sceneOneMsg: {},
      BasicSwich: false,
      BasicInfo: { id: null, label: null },
      sceneOne: [
        //   {
        //     nodeCode: "20111700006",
        //     nodeName: "规则b",
        //     parentNode: "20111700005",
        //     descn: null,
        //     parentName: null,
        //     sceneCode: {
        //       sceneCode: "2020120203",
        //       sceneName: "场景test001-3",
        //       descn: "test",
        //       creater: "sysadmin",
        //       createrName: null,
        //       createdTm: "2020-11-17 16:09:30",
        //       modifier: "sysadmin",
        //       modifierName: null,
        //       modifiedTm: "2020-11-17 17:03:49",
        //       status: "0",
        //       runType: "0",
        //       sceneType: null,
        //       runStatus: null,
        //       count: null,
        //     },
        //   },
        //   {
        //     nodeCode: "20111700005",
        //     nodeName: "规则a",
        //     parentNode: null,
        //     descn: null,
        //     parentName: null,
        //     sceneCode: {
        //       sceneCode: "2020120203",
        //       sceneName: "场景test001-3",
        //       descn: "test",
        //       creater: "sysadmin",
        //       createrName: null,
        //       createdTm: "2020-11-17 16:09:30",
        //       modifier: "sysadmin",
        //       modifierName: null,
        //       modifiedTm: "2020-11-17 17:03:49",
        //       status: "0",
        //       runType: "0",
        //       sceneType: null,
        //       runStatus: null,
        //       count: null,
        //     },
        //   },
      ],
      sceneTwo: [
        // {
        //   nodeCode: "a",
        //   nodeName: "规则a",
        //   parentNode: null,
        //   descn: null,
        //   parentName: null,
        //   sceneCode: {
        //     sceneCode: "2020110401",
        //     sceneName: "场景test001",
        //     descn: "test",
        //     creater: "sysadmin",
        //     createrName: null,
        //     createdTm: "2020-11-04 11:23:29",
        //     modifier: "sysadmin",
        //     modifierName: null,
        //     modifiedTm: "2020-11-16 17:42:18",
        //     status: "0",
        //     runType: "0",
        //     sceneType: null,
        //     runStatus: null,
        //     count: null,
        //   },
        // },
        // {
        //   nodeCode: "b",
        //   nodeName: "规则b",
        //   parentNode: "a",
        //   descn: null,
        //   parentName: null,
        //   sceneCode: {
        //     sceneCode: "2020110401",
        //     sceneName: "场景test001",
        //     descn: "test",
        //     creater: "sysadmin",
        //     createrName: null,
        //     createdTm: "2020-11-04 11:23:29",
        //     modifier: "sysadmin",
        //     modifierName: null,
        //     modifiedTm: "2020-11-16 17:42:18",
        //     status: "0",
        //     runType: "0",
        //     sceneType: null,
        //     runStatus: null,
        //     count: null,
        //   },
        // },
      ],
      horizontal: false,
      collapsable: true,
      expandAll: false,
      treeDataOne: {},
      treeDataTwo: {},
      defaultProps: {
        children: "children",
        label: "nodeName",
      },
    };
  },
  created() {
    // this.expandChange();
  },
  mounted() {
    // 获取信息
    // 获取
    // this.init()
  },

  methods: {
    // 获取规则信息
    getRuleData(val) {
      console.log(val, "getRuleData");
      this.ruleName = "";
      let ruleNameArr = [];
      val.forEach((item) => {
        ruleNameArr.push(item.ruleName);
      });
      this.ruleName = ruleNameArr.toString();
    },
    init() {
      this.treeDataOne = {};
      this.getSceneData();
      this.sceneOneTable = [];
      this.sceneTwoTable = [];
    },
    getSceneData() {
      let params = {
        all: "yes", // 是否获取全部节点
        curNodeCode: "", // 当前节点编码
        sceneCode: this.sceneCode, // 场景编码
      };
      ruleScene.comboBySceneNode(params).then((res) => {
        if (res.code == 200) {
          this.sceneOne = res.datas;
          var _self = this;
          if (res.datas.length >= 1) {
            _self.sceneOne.forEach(function (item) {
              if (item.parentNode == null || item.parentNode == "") {
                _self.sceneOneMsg = item.sceneCode;
                item.parentNode = "root";
                _self.rootNodeOne = item.sceneCode;
                (_self.rootNodeOne.nodeCode = "root"),
                  (_self.rootNodeOne.parentNode = ""),
                  (_self.rootNodeOne.nodeName = _self.rootNodeOne.sceneName);
              }
            });
            _self.sceneOne.push(_self.rootNodeOne);
            let val = listToTree("nodeCode", "parentNode", _self.sceneOne);
            console.log(val, "val");
            _self.treeDataOne = val[0];
            console.log(_self.treeDataOne, "this.treeDataOne");
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },

    onMouseout(e, data) {
      this.BasicSwich = false;
    },
    onMouseover(e, data) {
      this.BasicInfo = data;
      // this.BasicSwich = true;
      this.BasicSwich = false;
      var floating = document.getElementsByClassName("floating")[0];
      floating.style.left = e.clientX - 300 + "px";
      floating.style.top = e.clientY - 100 + "px";
    },
    onExpand(e, data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    // 点击触发事件获取每一个节点的详细信息
    NodeClick(e, data) {
      console.log(e, data);
      let params = {
        nodeCode: data.nodeCode,
      };
      if (data.nodeCode == "root") {
        return;
      }
      ruleScene.getRuleNodeDetailImg(params).then((res) => {
        this.ruleName = "";
        this.sceneOneTable = [];
        if (res.code == 200) {
          let params = res.data;
          this.sceneOneTable.push(params);
          this.getRuleData(res.data.ruleList);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    collapse(list) {
      console.log(list, "list");
      var _this = this;
      list.forEach(function (child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
      });
    },
    expandChange() {
      this.toggleExpand(this.data, true);
    },
    toggleExpand(data, val) {
      var _this = this;
      if (Array.isArray(data)) {
        data.forEach(function (item) {
          _this.$set(item, "expand", val);
          if (item.children) {
            _this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          _this.toggleExpand(data.children, val);
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.floating {
  background: rgba(0, 0, 0, 0.7);
  width: 150px;
  height: 70px;
  line-height: 15px;
  position: absolute;
  color: #fff;
  padding-top: 15px;
  border-radius: 15px;
  padding-left: 15px;
  box-sizing: border-box;
  left: 0;
  top: 0;
  transition: all 0.3s;
  z-index: 999;
  text-align: left;
  font-size: 12px;
}
</style>
